<template>
    <div class="equipment-move-box box-empty">
        <div class="equipment-move">
            <div class="move-title">修改密码</div>
            <formDeploy ref="ruleForm" :deployRule="deployRule" @submitForm="submitForm" />
        </div>
    </div>
</template>

<script>
import formDeploy from '@/components/formDeploy.vue';
import {updateCipher} from '@/utils/api.js';
import Vue from 'vue';
export default {
    name: 'alterCode',
    components: {formDeploy},
    data() {
        return {
            deployRule: [
                {
                    title: '原始密码',
                    placeholder: '请输入原始密码',
                    type: 'password',
                    val: '',
                    showPassword: false,
                    disabled: false,
                    rules: [
                        {required: true, message: '请输入原始密码', trigger: 'blur'},
                        {min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur'},
                    ],
                },
                {
                    title: '新密码',
                    placeholder: '请输入新密码',
                    type: 'newpassword',
                    val: '',
                    showPassword: true,
                    disabled: false,
                    rules: [
                        {required: true, message: '请输入新密码', trigger: 'blur'},
                        {min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur'},
                    ],
                },
                {
                    title: '请确认新密码',
                    placeholder: '请再次输入新密码',
                    type: 'verify',
                    val: '',
                    showPassword: true,
                    disabled: false,
                    rules: [
                        {required: true, message: '请输入新密码', trigger: 'blur'},
                        {min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur'},
                    ],
                },
            ],
        };
    },
    methods: {
        submitForm(ruleForm) {
            console.log(ruleForm, 'ruleForm');
            // 确保引用的是子组件的 ref，然后获取子组件中的 el-form 的 ref
            const formComponent = this.$refs['ruleForm'];
            if (formComponent && formComponent.$refs.ruleForm) {
                formComponent.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        //校验成功写这里的代码
                        if (ruleForm.newpassword === ruleForm.verify) {
                            delete ruleForm.verify;
                            ruleForm.user_key = Vue.cookie.get('token');
                            updateCipher(ruleForm)
                                .then(res => {
                                    console.log(res, '---------------');
                                })
                                .catch(err => {
                                    console.log(err, 'err');
                                });
                            this.$message('修改成功');
                        } else {
                            this.$message.error('请检查原始密码是否正确，两次输入的新密码是否一致');
                        }
                    } else {
                        console.log('error submit!!');

                        return false;
                    }
                });
            } else {
                console.error('无法找到对应的表单组件或表单');
            }
        },
    },
};
</script>

<style scoped lang="scss">
/* 组件样式 */
</style>

<style scoped></style>
